<template>
   <ul>
      <!-- 系统类型 -->
      <li>
         <div class="liTop">
            <div class="titleleft">系统类型</div>
            <div class="contentright">
               <el-button type="" color="#626aef">申请更换子系统 ( 暂不支持更换 )</el-button>
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <el-radio-group v-model="SystemData.SystemInfo.systemType" style="margin: 6px 0;">
                  <el-radio label="ForumSystem" border>社区系统 Beta</el-radio>
                  <el-radio label="ComicSystem" border>漫画系统</el-radio>
                  <el-radio label="lightnovelSystem" border>小说系统</el-radio>
                  <el-radio label="ResourceSystem" border>资源系统</el-radio>
               </el-radio-group>
               <p><span>社区系统 Beta，其他系统待开发。</span></p>
               <!-- <input type="text"> -->
            </div>
         </div>
      </li>
      <!-- 系统独立 -->
      <li>
         <div class="liTop">
            <div class="titleleft">系统独立</div>
            <div class="contentright">
               <el-button type="" color="#626aef">Request ( 未开放 )</el-button>
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <p>
                  申请子系统独立（站长会根据当前系统情况审核是否符合独立标准，
                  审核成功你将会收到一份网站代码压缩包，以及一份网站部署文本教程一份。）
                  <span>需自身具备域名以及服务器条件！</span>
               </p>
               <!-- <input type="text"> -->
            </div>
         </div>
      </li>
      <!-- 系统名称 -->
      <li>
         <div class="liTop">
            <div class="titleleft">系统名称</div>
            <div class="contentright">
               <input type="text" v-model="SystemData.SystemInfo.systemName">
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <!-- <p>注意事項提醒<span>1321</span></p> -->
               <!-- <input type="text"> -->
            </div>
         </div>
      </li>
      <!-- 系统标识 -->
      <li>
         <div class="liTop">
            <div class="titleleft">系统标识</div>
            <div class="contentright">
               <input type="text" v-model="SystemData.SystemInfo.systemSign">
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <p>據點标识URL地址不建议频繁修改</p>
               <!-- <input type="text"> -->
            </div>
         </div>
      </li>
      <!-- 是否公開 -->
      <li>
         <div class="liTop">
            <div class="titleleft">是否公開</div>
            <div class="contentright">
               <el-switch v-model="SystemData.SystemInfo.systemIsopen" />
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <!-- <p>注意事項提醒<span>1321</span></p> -->
               <!-- <input type="text"> -->
            </div>
         </div>
      </li>
      <!-- 系统头像 -->
      <li>
         <div class="liTop">
            <div class="titleleft">系统头像</div>
            <div class="contentright">
               <input type="text" v-model="SystemData.SystemInfo.systemCover">
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <!-- <p>注意事項提醒<span>1321</span></p> -->
               <!-- <input type="text"> -->
            </div>
         </div>
      </li>
      <!-- 系统背景图 -->
      <li>
         <div class="liTop">
            <div class="titleleft">系统背景图</div>
            <div class="contentright">
               <input type="text" v-model="SystemData.SystemInfo.systemBackground">
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <!-- <p>注意事項提醒<span>1321</span></p> -->
               <!-- <input type="text"> -->
            </div>
         </div>
      </li>
      <!-- 系统主色 -->
      <li>
         <div class="liTop">
            <div class="titleleft">系统主色</div>
            <div class="contentright">
               <input type="text" v-model="SystemData.SystemInfo.systemColor" placeholder="">
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <!-- <p>注意事項提醒<span>1321</span></p> -->
               <!-- <input type="text"> -->
            </div>
         </div>
      </li>
      <!-- 系统简介 -->
      <li>
         <div class="liTop">
            <div class="titleleft">系统简介</div>
            <div class="contentright">
               <input type="text" v-model="SystemData.SystemInfo.systemIntro">
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <!-- <p>注意事項提醒<span>1321</span></p> -->
               <!-- <input type="text"> -->

            </div>
         </div>
      </li>
   </ul>
   <button class="save" @click="updateStronghold">保存设置</button>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";
const { userinfo } = storeToRefs(cnyzsUserpinia())
const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: [],
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
})

// 系统基础信息相关 =========================
// 修改系统基础信息
const updateStronghold = () => {
   // 據點創建者
   if (props.SystemData.SystemInfo.systemCreateUser._id === userinfo.value._id) return save()
   // 據點管理員
   if (props.SystemData.SystemInfo.systemAuth.some((v: any) => v._id === userinfo.value._id)) return save()
   async function save() {
      let newdata = JSON.parse(JSON.stringify(props.SystemData.SystemInfo))
      delete newdata.systemAuth
      delete newdata.systemZone
      delete newdata.systemType
      delete newdata.systemCreateUser
      const res: any = await cnyzsRequest('/api/cnyzs-system/update-info', { method: 'POST', data: newdata })
      if (res.status === 200) return ElMessage.success(res.message)
      ElMessage.warning(res.message)
   }
}


</script>
<style lang="scss" scoped>
::-webkit-scrollbar-thumb {
   background-color: var(--aoir-color-primary-2);
   border-radius: 15px;
}

input {
   width: 300px;
   color: #555;
   height: 45px;
   border: 0;
   font-size: 16px;
   background-color: #FFF;
   border-bottom: 1px solid #f5f6f7;
   margin-bottom: 5px;
   border-radius: 4px;
   caret-color: var(--aoir-color-primary-2);
   padding: 0 10px;
   border-radius: var(--aoir-border-radius);
   box-shadow: 0 0 35px 0 rgba(108, 108, 108, 0.1);
}

.save {
   position: absolute;
   right: 30px;
   bottom: 30px;
   border: 0;
   padding: 8px 16px;
   background-color: var(--aoir-color-primary);
   color: #FFF;
   border-radius: 6px;
   cursor: pointer;
   transition: all .2s;
   display: flex;
   align-items: center;
   box-shadow: 0 0 50px 0 rgba(74, 74, 74, 0.187);
   margin-left: 15px;
   font-size: 15px;
   z-index: 10;

   &:hover {
      opacity: .7;
   }
}

ul {
   width: 100%;
   display: flex;
   flex-direction: column;

   li {
      width: 100%;
      padding: 10px 0px 10px 0;
      border-bottom: 1px solid #eeeeee85;


      .liTop {
         display: flex;
         align-items: center;
         margin-bottom: 5px;

         .titleleft {
            width: 120px;
            margin-right: 20px;
            display: flex;
            // align-items: center;
            justify-content: flex-end;
            // color: var(--aoir-color-primary);
            color: #666666;
            font-size: 15px;
            font-weight: 700;
         }

         .contentright {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            button {
               border: 0;
               padding: 6px 14px;
               background-color: var(--aoir-color-primary);
               color: #FFF;
               border-radius: 6px;
               cursor: pointer;
               transition: all .2s;
               display: flex;
               align-items: center;
               box-shadow: 0 0 5px 0 rgba(74, 74, 74, 0.141);
               margin-right: 15px;
               font-size: 14px;
               font-weight: 700;
            }
         }
      }

      .liBottom {
         display: flex;

         .liBottom-left {
            width: 120px;
            margin-right: 20px;
            display: flex;
            justify-content: flex-end;
            color: #777;
            font-size: 14px;
         }

         .liBottom-right {
            flex: 1;

            p {
               font-size: 13px;
               color: #999;
               margin-bottom: 10px;

               span {
                  color: var(--aoir-color-primary);
               }
            }

            .licontent {
               width: 100%;
               min-height: 50px;
            }
         }
      }

   }
}
</style>